/* Logo Popup */
.logo_pop {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(50px);
    z-index: 50;
    position: absolute;
    top: 0;
    animation: fadeOut linear 2s ; /* Add animation */
}

@keyframes fadeOut {
    0% {
        opacity: 100%;
        backdrop-filter: blur(50px);
        
        
    }

    50% {
        opacity: 50%;
        
        
    }

    100% {
        opacity: 0%;
        backdrop-filter: blur(0px);
        
    }
}

.logo_pop img {
    display: block;
    width: auto;
    height: auto;
    margin: auto;
    transform: scale(0.5); /* Use transform instead of scale */
}

/* Long Div */

.long {
    width: 75%;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: flex; /* Add this line */
    justify-content: center; /* Add this line */
    align-items: center; /* Add this line to center vertically */
}

.long:hover {
    width: 75%;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
}

.long h4 {
    position: absolute; /* Add this line */
    top: 50%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the text */
    color: white; /* Optional: Change text color for better visibility */
    z-index: 1; /* Ensure the text is above the image */
    font-family: 'latoreg';
    text-shadow: 0px 0px 15px rgb(255, 255, 255);
    font-size: large;
}

.long a {
    position: absolute; /* Add this line */
    top: 50%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the text */
    color: white; /* Optional: Change text color for better visibility */
    z-index: 1; /* Ensure the text is above the image */
    font-family: 'latoreg';
    text-shadow: 0px 0px 15px rgb(255, 255, 255);
    font-size: large;
}

.long img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    filter: blur(25px);
}

.long:hover img { 

    width: 110%;
    filter: blur(5px);
    transform: translateY(-25%);
    transition: all ease-in-out .5s;

}

.long:hover a h4 { 

    text-shadow: 0px 0px 25px rgb(255, 255, 255);
    transition: all ease-in-out .5s;

}

.long:hover a { 

    text-shadow: 0px 0px 25px rgb(255, 255, 255);
    transition: all ease-in-out .5s;

}

.long a h4:hover { 

    filter: blur(0.25px);
    font-size: xx-large;
    text-shadow: 0px 0px 15px rgb(0, 0, 0);
    transition: all ease-in-out .5s;

}

/* Piece Gallery */

.gpiece{
    width: 300px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .25);
}

.gpiece:hover{
    width: 550px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 25px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
}

.gpiece img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    filter: blur(0px);
}

.gpiece:hover img { 

    box-shadow: 0px 0px 25px rgb(0, 0, 0, .75);
    scale: 50%;
    filter: blur(0px);
    transition: all ease-in-out .5s;

}

.gpiece:active img { 

    box-shadow: 0px 0px 25px rgb(0, 0, 0, .75);
    scale: 150%;
    filter: blur(0px);
    transition: all ease-in-out .5s;
    cursor: zoom-in;

}

/* Titles and Fonts */
.piece-mainT{
font-family: 'latoblack';
text-align: center;
}

footer{
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(25px);
height: fit-content;
width: 75%;
margin: auto;
margin-top: 2%;
font-family: 'latoreg';
font-size: xx-small;
box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
text-align: center;
border-top-left-radius: 25px; border-top-right-radius: 25px;
z-index: 50;
position: sticky;
top: -0;
}

footer h6{
    font-size: 9px;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    border-radius: 25px;
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(136, 136, 136); 
    border-radius: 25px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(0, 0, 0);
    border-radius: 25px;
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
  }
  
  .cv_pdf{
    width: 1000px;; 
    height: 750px; 
    margin-left: auto; margin-right: auto;
  }

  /* Social Media */
.sPiece{
    border-radius: 15px;
    width: 200px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .25);
}

.sPiece:hover{
    width: 210px;
    border-radius: 25px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 25px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
}

.sPiece img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    filter: blur(0px);
}

.sPiece:hover img { 

    box-shadow: 0px 0px 25px rgb(0, 0, 0, .75);
    scale: 110%;
    filter: blur(0px);
    transition: all ease-in-out .5s;

}

.sPiece:active img { 

    box-shadow: 0px 0px 25px rgb(0, 0, 0, .75);
    scale: 150%;
    filter: blur(0px);
    transition: all ease-in-out .5s;
    cursor: zoom-in;

}

/* Home Banner */

@keyframes home_long_trans {
    0% {
        width: 10%;
        filter: blur(45px) drop-shadow(0 0 25px rgb(0, 0, 0, .75));
    }
    100% {
        width: 15%;
        filter: blur(0px) drop-shadow(0 0 15px rgb(0, 0, 0, .5));
    }
}

.home_long {
    scale: 110%;
    width: 75%;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: flex; /* Add this line */
    justify-content: center; /* Add this line */
    align-items: center; /* Add this line to center vertically */
}

.home_long:hover {
    width: 75%;
    height: 350px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
}

.home_long h4 {
    position: absolute; /* Add this line */
    top: 50%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the text */
    color: rgb(255, 255, 255); /* Optional: Change text color for better visibility */
    z-index: 1; /* Ensure the text is above the image */
    text-shadow: 0px 0px 15px rgb(0, 0, 0);
    font-size: xx-large;
}

.home_long a {
    position: absolute; /* Add this line */
    top: 50%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the text */
    color: white; /* Optional: Change text color for better visibility */
    z-index: 1; /* Ensure the text is above the image */
    font-family: 'latoreg';
    text-shadow: 0px 0px 15px rgb(0, 0, 0);
    font-size: large;
}

.home_long img {
    display: block;
    width: 10%;
    height: auto;
    margin: auto;
    filter: blur(45px) drop-shadow(0 0 25px rgb(0, 0, 0, .75));
}

.home_long img.animate {
    animation: home_long_trans 1s ease-in-out forwards;
}

/* .home_long:hover img {  */
    /* scale: 15%; */
    /* width: 15%; */
    /* filter: blur(0px) drop-shadow(0 0 15px rgb(0, 0, 0, .5)); */
    /* transform: translateY(-265%); */
    /* box-shadow: 0px 0px 50px rgb(0, 0, 0); */
    /* filter: drop-shadow(0 0 25px rgb(0, 0, 0, .75)); */
    /* transition: all ease-in-out 1s; */

/* } */

.home_long:hover a h4 { 

    text-shadow: 0px 0px 25px rgb(0, 0, 0);
    transition: all ease-in-out .5s;

}

.home_long:hover a { 

    text-shadow: 0px 0px 25px rgb(255, 255, 255);
    transition: all ease-in-out .5s;

}

.home_long a h4:hover { 

    filter: blur(0.25px);
    font-size: xx-large;
    text-shadow: 0px 0px 15px rgb(0, 0, 0);
    transition: all ease-in-out .5s;

}

/* 700px or smaller */
@media only screen and (max-width: 700px) {

/* Logo Pop */
.logo_pop img {
    display: block;
    width: auto;
    height: auto;
    margin: auto;
    transform: scale(0.25); /* Use transform instead of scale */
}

/* Gallery Piece */

.gpiece{
    width: 100px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 15px rgb(0, 0, 0, .25);
}

.gpiece:hover{
    width: 75%;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative; /* Add this line */
    box-shadow: 0px 0px 25px rgb(0, 0, 0, .5);
    transition: all ease-in-out .5s;
}

.gpiece:hover img { 

    box-shadow: 0px 0px 25px rgb(0, 0, 0, .75);
    scale: 95%;
    filter: blur(0px);
    transition: all ease-in-out .5s;

}

    /* Home Logo Div */
    @keyframes home_long_trans {
        0% {
            width: 10%;
            filter: blur(45px) drop-shadow(0 0 25px rgb(0, 0, 0, .75));
        }
        100% {
            width: 15%;
            filter: blur(0px) drop-shadow(0 0 15px rgb(0, 0, 0, .5));
        }
    }
    
    .home_long {
        width: 75%;
        height: 350px;
        background-color: rgba(0, 0, 0, 0.1);
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        text-align: center;
        overflow: hidden;
        position: relative;
        display: flex; /* Add this line */
        justify-content: center; /* Add this line */
        align-items: center; /* Add this line to center vertically */
    }
    
    .home_long:hover {
        width: 75%;
        height: 70px;
        background-color: rgba(0, 0, 0, 0.1);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        overflow: hidden;
        position: relative; /* Add this line */
        box-shadow: 0px 0px 15px rgb(0, 0, 0, .5);
        backdrop-filter: blur(25px);
        transition: all ease-in-out .5s;
    }
    
    .home_long img {
        display: block;
        width: 10%;
        height: auto;
        margin: auto;
        filter: blur(45px) drop-shadow(0 0 25px rgb(0, 0, 0, .75));
    }
    
    .home_long img.animate {
        animation: home_long_trans 1s ease-in-out forwards;
    }
    
    .home_long .cehuafont {
        position: absolute; /* Add this line */
        top: 50%; /* Adjust as needed */
        left: 50%; /* Adjust as needed */
        transform: translate(-50%, -50%); /* Center the text */
        color: rgb(255, 255, 255); /* Optional: Change text color for better visibility */
        z-index: 1; /* Ensure the text is above the image */
        text-shadow: 0px 0px 15px rgb(0, 0, 0);
        font-size: small;
    }
    
    }